<template>
	<div id="app">
		<div id="nav">
			<div class="middle flex">
				<router-link to="/"><i class="component-icon"></i>常用组件</router-link>
				<router-link to="/game"><i class="game-icon"></i>小游戏</router-link>
				<!-- <span>{{ dayjs("1999-01-01").fromNow() }}</span>
				<span>{{ dayjs().format("YYYY-MM-DD") }}</span> -->
				<!-- &nbsp;&nbsp;
				<span>{{ dayjs().isBefore(dayjs("2011-01-01")) }}</span> -->
			</div>
		</div>
		<router-view />

		<pagination v-if="false" :pageCount="10" />
	</div>
</template>
<script>
import pagination from "@/components/pagination/index.vue";
import dayjs from "dayjs";
require("dayjs/locale/zh-cn");
var RelativeTime = require("dayjs/plugin/relativeTime");
var utc = require("dayjs/plugin/utc");
dayjs.extend(RelativeTime);
dayjs.locale("zh-cn");
dayjs.extend(utc);
export default {
	components: { pagination },
	data() {
		return {
			dayjs,
		};
	},
};
</script>
<style lang="less">
#nav {
	@height: 50px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 50%;
	height: @height;
	border-bottom: 1px solid @border-color;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	color: #fff;
	background: #1d185e;
	transform: translateX(-50%);
	z-index: 999;
	.middle {
		width: @main-width;
		margin: 0 auto;
		.component-icon,
		.game-icon {
			width: 22px;
			height: 22px;
			margin-right: 10px;
			background-size: 100% 100%;
		}
		.component-icon {
			background-image: url("./assets/icon/component.png");
		}
		.game-icon {
			background-image: url("./assets/icon/game.png");
		}
	}
	a {
		display: flex;
		align-items: center;
		font-size: 16px;
		padding-right: 20px;
		line-height: @height;
	}
	.router-link-exact-active {
		color: @main-color;
		font-weight: bold;
	}
}
</style>
